import React, { PureComponent } from 'react'
import { StyleSheet, View, Text, Image, StatusBar } from 'react-native'
import { List, InputItem, Button, Toast } from 'antd-mobile';
import { connect } from 'react-redux';
import PostActivityIndicator from '../../common/PostActivityIndicator';

@connect(({ user }) => ({ user }))
class LoginSceen extends PureComponent {
    static navigationOptions = {
        title: null,
        header: null
    }
    state = {
        userNameError: false,
        passwordError: false,
        userName: '',
        password: ''
    }
    onUserNameChange = (value) => {
        const { userName, userNameError } = this.state;
        this.setState({ userNameError: value == '', userName: value });
    }
    onPassWordChange = (value) => {
        const { password, passwordError } = this.state;
        this.setState({ passwordError: value == '', password: value });
    }
    onLogin = () => {

        const { userName, userNameError, password, passwordError } = this.state;
        if (userNameError || passwordError) {
            return;
        }
        if (userName == '') {
            Toast.info("登录名不能为空！", 2, null, false);
            return;
        }
        if (password == '') {
            Toast.info("密码不能为空！", 2, null, false);
            return;
        }
        this.props.dispatch({
            type: 'user/login', payload: {
                "loginName": userName,
                "password": password
            }
        });
    }
    componentWillUpdate() {
        const { loginSuccess } = this.props.user;
        if (loginSuccess) {
            this.props.navigation.navigate('Main');
        }
    }
    render() {
        const { loading } = this.props.user;
        return (
            <View style={styles.container}>
                <StatusBar backgroundColor="#eee" />
                <PostActivityIndicator
                    animating={loading}
                    text="登陆中"
                />
                <Image source={{ uri: 'http://bp668.com/images/logo.png' }}
                    style={styles.logo} />
                <Image source={{ uri: 'http://cdn.bp668.com/appbg.jpg' }}
                    style={styles.imagebg} />
                <Text style={styles.loginTitle}>佰平教务系统</Text>

                <List style={styles.form}>
                    <InputItem
                        style={styles.formInput}
                        type="text"
                        placeholder="请输入账号！"
                        error={this.state.userNameError}
                        //  onErrorClick={this.onErrorClick}
                        onChange={this.onUserNameChange}
                        value={this.state.userName}
                    >账号</InputItem>
                    <InputItem
                        style={styles.formInput}
                        type="password"
                        placeholder="请输入密码！"
                        error={this.state.passwordError}
                        //  onErrorClick={this.onErrorClick}
                        onChange={this.onPassWordChange}
                        value={this.state.password}
                    >密码</InputItem>
                </List>
                <View style={styles.submitButton}>
                    <Button style={styles.loginButton} onClick={this.onLogin} type="primary">立即登录</Button>
                </View>
                <Text style={styles.PowerBy}>佰平教育科技公司版权所有</Text>
            </View>
        );
    }
}
export default LoginSceen;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        backgroundColor: '#f4f4f4'
    },
    imagebg: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        zIndex: -1
    },
    logo: {
        width: 49,
        height: 48,
        marginTop: 80,
        marginBottom: 15
    },
    loginTitle: {
        marginBottom: 30,
        fontSize: 16
    },
    form: {
        width: '90%',
        borderRadius: 16,
        borderColor: '#FFF',
        borderStyle: 'solid',
        borderWidth: 1,
        overflow: 'hidden',
        borderBottomWidth: 0,
        borderTopWidth: 0,
    },
    formInput: {
        borderBottomWidth: 0,
        borderTopWidth: 0,
        borderColor: '#FFF',

    },
    submitButton: {
        width: '90%',
        backgroundColor: 'transparent',
        marginTop: 20
    },
    loginButton: {
        marginTop: 12,
        borderRadius: 50
    },
    PowerBy: {
        marginTop: 50
    }
})

